<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/template.xhtml"
                >
<ui:define name="Content">
		<h:form>
			<p:growl id="growl" sticky="true" showDetail="true"/> 
			<p:wizard	flowListener="#{userWizard.onFlowProcess}">
				<p:tab id="user_personal" title="Personal">
					<p:panel header="Datos Personales">
						<p:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
								<p:outputLabel value="Nombres:"/>
								<p:inputText required="true" value="#{userWizard.usuario.nombres}"/>
								<p:outputLabel value="Apellidos:"/>
								<p:inputText required="true" label="Apellidos:" value="#{userWizard.usuario.apellidos}"/>
								<p:outputLabel value="DNI:"/>
								<p:inputText required="true" label="DNI:" value="#{userWizard.usuario.dni}"/>
						</p:panelGrid>
					</p:panel>
				</p:tab>
				
				<p:tab id="user_session" title="Usuario">
					<p:panel header="Cuenta de Usuario">
						<p:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
								<p:outputLabel value="Codigo:"/>
								<p:inputText required="true" label="Codigo:" value="#{userWizard.usuario.codigo}"/>
								<p:outputLabel value="Usuario:"/>
								<p:inputText required="true" label="Usuario:" value="#{userWizard.usuario.user}"/>
								<p:outputLabel value="Contraseña:"/>
								<p:password required="true" label="Contraseña:" value="#{userWizard.usuario.password}"/>	
						</p:panelGrid> 
					</p:panel>
				</p:tab>
				
				<p:tab id="user_area" title="Area">
					<p:panel header="Area de Trabajo">
						<p:panelGrid columns="2" styleClass="grid">
							<p:outputLabel value="AREAS:"/>
							
							<p:selectOneMenu id="area" required="true" value="#{userWizard.id_area}"  effect="fade"> 
								<p:ajax event="change" listener="#{userWizard.onItemSelectArea}" />
								<f:selectItem itemLabel="Seleccione un area" itemValue="#{null}" />  
           						<f:selectItems value="#{userWizard.areas}" var="var_area" itemLabel="#{var_area.tipo} - #{var_area.id}" itemValue="#{var_area.id}"/>
							</p:selectOneMenu>
							
							
							<p:outputLabel value="CARGO:"/>
							
							<p:selectOneMenu id="cargo" required="true" value="#{userWizard.cargo}"  effect="fade"> 
								<p:ajax event="change" listener="#{userWizard.onItemSelectCargo}" />
								<f:selectItem itemLabel="Seleccione un area" itemValue="#{null}" />  
           						<f:selectItem itemLabel="Coordinador" itemValue="Coordinador"/>
           						<f:selectItem itemLabel="Bolsista" itemValue="Bolsista"/>
           						<f:selectItem itemLabel="Practicante" itemValue="Practicante"/>
							</p:selectOneMenu>
							
						</p:panelGrid> 
					</p:panel>
				</p:tab>
				<p:tab id="confirm" title="Confirmacion">  
            		<p:panel header="Confirme los datos">  
              			<p:panelGrid id="confirmation" columns="6">
              					
		                    	<h:outputText value="Nombres: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.usuario.nombres}" />  
		                    	<h:outputText value="Apellidos: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.usuario.apellidos}" />
		                    	<h:outputText value="DNI: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.usuario.dni}" />
		                    	
		                    	<h:outputText value="Codigo: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.usuario.codigo}" /> 
		                    	<h:outputText value="Usuario: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.usuario.user}" />
		                    	<h:outputText value="Contraseña: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.usuario.password}" />
		                   		
		                   		<h:outputText value="Area de Trabajo: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.area_selected.tipo} - #{userWizard.area_selected.id}"/> 
                				<h:outputText value="Cargo de Trabajo: "/>
		                    	<h:outputText styleClass="outputLabel" value="#{userWizard.cargo}"/> 
                				
                				
                		</p:panelGrid>  
                  		<p:commandButton value="Guardar Usuario" update="growl" actionListener="#{userWizard.save}"/>  
            		</p:panel>  
        		</p:tab>  
			</p:wizard>
		</h:form> 
</ui:define>
</ui:composition>